<script setup>
  import * as echarts from 'echarts'
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { ref, reactive, onMounted, onUnmounted } from 'vue';
  import { useRouter } from 'vue-router'
  import useUserInfoStore  from '@/stores/userinfo'
  import {
    FuturesMarketHot,
    FuturesIndexQuotation,
    SymbolDailyCandle,
    FuturesSpotbasic,
    FuturesPosition,
   } from '@/api/futures/quotation' 
  import { FastShortMessage } from '@/api/information/shortMessage'
  import { GetDataIndexReading } from '@/api/datlib/datIndex'
  import { PaginatorPeriodReport, UpdateReportReading } from '@/api/information/periodReport'
  import { GetBanners } from '@/api/common'
  import { datetimeToString, dateWeekName } from  '@/utils/datetimeUtils'
  import { randomChoice } from '@/utils/dataUtils'
  import PDFView from '@/components/PdfPreview.vue'

  const userInfoStore = useUserInfoStore()

  const pageRouter = useRouter()

  let quotationTimer = null // 获取市场热度和行情的定时器
  let flushTipTimer = null // 文字闪现的定时器
  let messageTimer = null // 请求短讯通和快讯的定时器

  const indexChartTmp = ref(null)
  // 指数实时行情
  const indexesQuoteData = reactive({ data: [] })

  // 轮播
  const carouselData = reactive({
    isShow: false,
    data: [
      // {
      //   img_src: 'http://127.0.0.1:9088/appFiles/image/banner/datlib2.jpeg',
      //   router_name: 'datalib',
      //   router_path: '/datalib'
      // }
    ],
  })
  // 热门数据
  const hotDatalibIndex = reactive({
    data: [
      {name: '这是一条热门数据', 'datavalue': 202.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
      {name: '这是一条热门数据这是一条热门数据这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022225152.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
      {name: '这是一条热门数据这是一条热门数据', 'datavalue': 2022252.36},
    ]
  })

  // 财经日历控制
  const calendarFundConfig = reactive({
    page: 1,
    totalCount: 0,
    totalPage: 0,
    queryDate: datetimeToString(new Date()),
    weekName: dateWeekName(),
    noMoreData: false,
    dataList: [],
    dataLoading: false,
  })

  const addLoadingCalendar = () => {
    if (calendarFundConfig.noMoreData) return
    if (calendarFundConfig.page >= calendarFundConfig.totalPage) {
      calendarFundConfig.noMoreData = true
      return
    }
    calendarFundConfig.noMoreData = false
    calendarFundConfig.page = calendarFundConfig.page + 1
    getCurrentCalContent()
  }

  // 指数行情可视化数据
  const curIndexChartData = reactive({
    curIndexCode: '000001.SH',
    options: {},
    chartData: [],
    title: '上证指数',
    price: null,
    change: null,
    changeRatio: null,
    class_name: 'chart-title '
  })
  let indexChart = null

  // 显示`刷新中`控制
  const flushTip = reactive({
    tips: [],
    index: 0
  })

  // 基差表
  const basicData = reactive({
    data: [],
    basicDate: '',
    showDialog: false,
  })

  // 最新研报
  const lastReportFile = reactive({
    data: [],
    page: 1,
    pageSize: 7,
    fileCategory: [
      { id: 1, name: '晨会', key: 'EARLY', active: false },
      { id: 2, name: '日报', key: 'DAILY', active: false },
      { id: 3, name: '周报', key: 'WEEKLY', active: false },
      { id: 4, name: '技术解盘', key: 'TECHNICAL', active: false }
    ]
  })

  // 市场热度
  const hotData = reactive({
    curTab: 0,
    tabs: ['资金流向', '价格', '持仓量'],
    indicators: ['capitalFlow', 'changeRatio', 'dailyIncreasePosition'],
    curColor: '#eb3323',
    data: [
      {
        key: 'flat',
        count: 0,
        percent: '100%',
        bg: '#aaa'
      },
    ],
    detailData: []
  })

  // 净持仓数据
  const netPositionData = reactive({
    data: [],
    allDataList: [],
    positionDate: '',
    showDialog: false,
  })

  // 短讯通
  const shortmsgData = reactive({
    data: [],
    page: 1,
    pageSize: 12
  })

  // 弹窗信息相信(短讯通和24小时快讯)
  const dialogMsgDetail = reactive({
    isShow: false,
    time: '',
    content: ''

  })
  // 24小时快讯
  // const fastmsgData = reactive({
  //   data: [],
  //   page: 1,
  //   pageSize: 10
  // })

  // 弹窗预览文件
  const dialogReport = reactive({
    isShow: false,
    title: '',
    pdfUrl: ''
  })

  // --------  工具函数  -----------

  const isRouterGuardPass = (moduleName) => {
    if (!userInfoStore.userType || userInfoStore.userType === 2) {
      ElMessageBox.alert(
        `您将访问【${moduleName}】内容，如需开通权限，请联系客服`,
        '提示',
        {
          confirmButtonText: '确定'
        }
      )
      return false
    } else if (userInfoStore.userType === 3 &&  userInfoStore.probationExpired) {
      ElMessageBox.alert(
        `您试用已到期，将访问【${moduleName}】内容，如需开通权限，请联系客服`,
        '提示',
        {
          confirmButtonText: '确定'
        }
      )
      return false
    } else {
      return true
    }
  }

  // 设置指数图的标题
  const setCandleChartTitle = (origin) => {
    curIndexChartData.price = origin.cur_price
    curIndexChartData.change = origin.change
    curIndexChartData.title = origin.name
    curIndexChartData.changeRatio = origin.change_ratio
    curIndexChartData.class_name = 'chart-title'
    if (origin.change > 0) curIndexChartData.class_name += ' red'
    if (origin.change < 0) curIndexChartData.class_name += ' green'
  }
  // 设置指数图的data最后一个值
  const setCandleChartLastItem = (origin) => {
    if (curIndexChartData.chartData.length < 1) return
    const last = {
      code: origin.code,
      time: origin.trade_date,
      open: origin.open,
      low: origin.low,
      high: origin.high,
      close: origin.cur_price
    }
    let lastIndex = curIndexChartData.chartData.length - 1
    let lastObj = curIndexChartData.chartData[lastIndex]
    if (last.time !== lastObj.time) {
      curIndexChartData.chartData.push(last)
    } else {
      curIndexChartData.chartData.splice(lastIndex, 1, last)
    }
    setIndexChartOption()
  }


  // -------- NetWork请求 -------------
  // 请求基差表
  const getSpotBasicNetwork = () => {
    FuturesSpotbasic().then((res) => {
      const data = res.data
      basicData.data = data.basic.map((item) => {
        let strSpotChange = item.spot_change
        let cls_name = ''
        if (item.spot_change > 0) {
          strSpotChange = '+' + strSpotChange
          cls_name = 'changeup'
        }
        if (item.spot_change < 0) {
          // strSpotChange = strSpotChange
          cls_name = 'changedown'
        }
        item.strSpotChange = strSpotChange
        item.clsName = cls_name
        return item
      })
      basicData.basicDate = data.quote_date
    })
  }

  // 请求最新研报
  const getLatestReportFile = () => {
    // 获取报告
    PaginatorPeriodReport(lastReportFile.page, lastReportFile.pageSize).then((res) => {
      const data = res.data
      lastReportFile.data = data.rows
    })
  }
  // 点击报告种类
  const toShowCategoryLastedReport = (category) => {
    for (let i=0; i < lastReportFile.fileCategory.length; i++) {
      lastReportFile.fileCategory[i].active = false
    }
    // 获取报告
    PaginatorPeriodReport(lastReportFile.page, lastReportFile.pageSize, category.key).then((res) => {
      const data = res.data
      lastReportFile.data = data.rows
    })
    category.active = true
  }

  // 请求指数实时
  const getIndexRealNetwork = () => {
    FuturesIndexQuotation().then((res) => {
      const data = res.data
      indexesQuoteData.data = data.quotation.map((item) => {
        item.class_name = 'idx-item ' + item.class_name
        // 设置要显示的指数数据
        if (item.code === curIndexChartData.curIndexCode) {
          setCandleChartTitle(item) // 设置标题
          setCandleChartLastItem(item) // 设置最后一个K
        }
        return item
      })
    })
  }

  // 请求持仓数据
  const getNetPositionNetwork = () => {
    FuturesPosition().then((res) => {
      const data = res.data
      const needPosition = randomChoice(data.position, 10)
      netPositionData.positionDate = data.quote_date
      netPositionData.data = needPosition.map((item) => {
        let strNetposition = item.net_position
        let cls_name = ''
        if (item.net_position > 0){
            strNetposition = '+' + strNetposition
            cls_name = 'changeup'
        }
        if (item.net_position < 0){
            strNetposition = '' + strNetposition
            cls_name = 'changedown'
        }
        return {
          name: item.name,
          netPosition: item.net_position,
          strNetposition: strNetposition,
          cls_name: cls_name
        }
      })
      netPositionData.allDataList = data.position
    })
  }
  // 请求短讯通
  const getShortmsgNetwork = () => {
    // 短讯通msgType=short（1）
    FastShortMessage(1, shortmsgData.page, shortmsgData.pageSize)
    .then((res) => {
      const data = res.data
      shortmsgData.data = data.data
    })
  }
  // 请求市场热度,热度类型切换
  const getTabMarkethot = (index) => {
    if (!index && index !== 0) index = hotData.curTab
    FuturesMarketHot(hotData.indicators[index]).then((res) => {
      const data = res.data
      hotData.detailData = data.quotation
      // 设置热度条
      hotData.curTab = index
      hotData.data = data.hots
      hotData.curColor = data.color
    })
  }

  // k线数据变化
  const toChangeCandle = (indexItem) => {
    setCandleChartTitle(indexItem)
    if (indexItem.code === curIndexChartData.curIndexCode) {
      if (curIndexChartData.chartData.length > 0) {
        // 更改最后一个数据
        setCandleChartLastItem(indexItem)
        return 
      }
    }
    // 请求新的指数k线数据
    getIndexDailyCandle(indexItem.code)
  }

  // 请求指数的K线数据
  const getIndexDailyCandle = (code=null) => {
    if (!code) code = '000001.SH'
    const start = datetimeToString(new Date(new Date().getTime() - 90 * 24 * 3600 * 1000), false, '')  // 300天
    const end = datetimeToString(new Date(), false, '')
    SymbolDailyCandle(code, start, end).then((res) => {
      const data = res.data
      curIndexChartData.chartData = data.result
      curIndexChartData.curIndexCode = data.symbol
      setIndexChartOption()
    })
  }

  // 计算均线
  const calculateMA = (dayCount) => {
    const chartData = curIndexChartData.chartData
    let result = []
    for (let i=0; i < chartData.length; i++) {
      if (i < dayCount) {
        result.push('-');
        continue
      }
      let sum = 0
      for (let j=0;j< dayCount;j++) {
        sum += chartData[i - j].close
      }
      result.push(Math.round(sum / dayCount, 2))
    }
    return result
  }

  // 设置指数的日K线可视化图形配置
  const setIndexChartOption = () => {
    const chartData = curIndexChartData.chartData
    // console.log('chartData', chartData)
    const cOpts = {
      grid: {
        left: '15%',
        top: 20
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross'
        }
      },
      legend: {
        data: ['日K', 'MA5'],
        left: '15%',
        top: 0,
        itemHeight: 5
      },
     xAxis: {
      type: 'category',
      data: chartData.map(i => i.time),
      axisLine: { onZero: false },
      splitLine: { show: false },
      min: 'dataMin',
      max: 'dataMax',
     },
     yAxis: {
      type: 'value',
      scale: true,
      splitArea: { show: true }
     },
     series: [
      {
        type: 'candlestick',
        name: '日K',
        data: chartData.map(i => [i.open, i.close, i.low, i.high]),
        // dimensions: ['开盘价', '收盘价', '最低价', '最高价'],
        zlevel: 9 
      },
      {
        name: 'MA5',
        type: 'line',
        data: calculateMA(5),
        symbol: 'none',
        smooth: true,
        lineStyle: {
          width: 1,
          opacity: 0.5
        }
      },
     ]
    }
    indexChart.setOption(cOpts)
  }

  // 财经日历返回
  const calendarsBack = (retData) => {
    calendarFundConfig.totalPage = retData.total_page
    if (calendarFundConfig.page === 1) {
      calendarFundConfig.dataList = retData.data
    } else {
      for (let i = 0; i < retData.data.length; i++) {
        calendarFundConfig.dataList.push(retData.data[i])
      }
    }
    calendarFundConfig.dataLoading = false
  }

  // 原生jsonp请求财经日历
  const getCurrentCalContent = () => {
    calendarFundConfig.dataLoading = true
    // 原生实现jsonp
    let url = `https://rl.cj.sina.com.cn/client/api/calendar_v2/get_economic_lists?callback=calendarCallback`
    url += `&start_time=${calendarFundConfig.queryDate}`
    url += `&end_time=${calendarFundConfig.queryDate}`
    url += `&page=${calendarFundConfig.page}&num=30&version=4.2.9`
    window.calendarCallback = (res) => {
      calendarsBack(res.result.data)
    }
    let script = document.createElement('script')
    script.src = url
    document.body.appendChild(script)
  }

  // 请求24小时快讯
  // const getFastmsgNetwork = () => {
  //   // 快讯msgType=fast（2）
  //   FastShortMessage(2, fastmsgData.page, fastmsgData.pageSize)
  //   .then((res) => {
  //     const data = res.data
  //     fastmsgData.data = data.data
  //   })
  // }

  // 点击报告文件
  const lastReportClick = (report) => {
    if (!isRouterGuardPass('报告')) return
    if (report.suffix === 'DOCX') {
      ElMessageBox({
        title: '提示',
        message: '该文件暂不支持预览!',
        type: 'error',
      }).catch(() => {})
    } else if (report.suffix === 'PDF') {
      dialogReport.pdfUrl = report.pdf_file
      dialogReport.title = report.title
      dialogReport.isShow = true
    }
    UpdateReportReading(report.id)
  }

  // 走马灯广告
  const getCaruselNetWork = () => {
    GetBanners().then((res) => {
      const bannerData = res.data
      if (bannerData.length > 0) {
        carouselData.data = bannerData
        carouselData.isShow = true
      } else {
        carouselData.isShow = false
      }
    })
  }

  // 点击广告
  const toClickCaruselItem = (item) => {
    if (item.router_name) {
      if (!isRouterGuardPass('行业数据')) return
      if (userInfoStore.hasLogin) {
        pageRouter.push({ path: item.router_path, name: item.router_name})
      } else {
        userInfoStore.getAppUserInfo() // 获取用户信息
      }
    }
  }

  // 数据排行榜
  const getIndexRank = () => {
    GetDataIndexReading().then((res) => {
      hotDatalibIndex.data = res.data
    })
  }
  // 排行榜更多数据
  const toEnterDatalib = () => {
    if (!isRouterGuardPass('行业数据')) return
    if (userInfoStore.hasLogin) {
      pageRouter.push({ path: '/datalib'})
    } else {
      userInfoStore.getAppUserInfo() // 获取用户信息
    }
  }

  // -------- NetWork请求 -------------
  
  
  // 显示短讯通项目详情
  const toShowMsgDetail = (msg) => {
    dialogMsgDetail.isShow = true
    dialogMsgDetail.time = msg.msg_time
    dialogMsgDetail.content = msg.content
  }

  // 跳转更多短讯通页面
  const toMoreShortmsg = () => {
    ElMessage.info('更多短讯通暂未开放，敬请期待...')
  }

  // 进入更多研报页面
  const toMoreReportFile = () => {
    // ElMessage.info('更多研报暂未开放，敬请期待...')
    if (!isRouterGuardPass('研报文章')) return
    if (userInfoStore.hasLogin) {
      pageRouter.push({ path: '/inforeport'})
    } else {
      userInfoStore.getAppUserInfo() // 获取用户信息
    }
  }

  // 挂载声明周期钩子
  onMounted(() => {
    userInfoStore.getAppUserInfo()
    // .then(() => {
    //   userInfoStore.getNavigationMenu()
    // }) 
    // .then((res)=> {
    // console.log('获取用户信息返回', res)
    // })

    indexChart = echarts.init(indexChartTmp.value)

    // ------- NetWork请求 -------
    getLatestReportFile() // 请求研报
    getIndexDailyCandle() // 请求初始指数k数据
    getSpotBasicNetwork()
    getIndexRealNetwork() // 指数的实时行情
    getNetPositionNetwork()
    getShortmsgNetwork()
    // getFastmsgNetwork()
    getTabMarkethot(0)
    getCaruselNetWork() // 请求走马灯广告是否有数据
    getIndexRank()

    // ------- NetWork请求 -------

    // 设置刷新文字提示定时器
    flushTipTimer = setInterval(() => {
      const char = ['刷', '新', '中', '.', '.', '.']
      if (flushTip.index < 6) {
        flushTip.tips.push(char[flushTip.index])
        flushTip.index += 1
      } else {
        flushTip.tips = []
        flushTip.index = 0
      }
    }, 600)

    // 设置短讯息刷新定时器(短讯通、24小时快讯)
    messageTimer = setInterval(() => {
      getShortmsgNetwork()
      // getFastmsgNetwork()
    }, 60 * 1000)

    // 设置获取市场热度和行情的定时器
    quotationTimer = setInterval(() => {
      getTabMarkethot()
      getIndexRealNetwork()
    }, 30 * 1000)

    // 获取财经日历
    getCurrentCalContent()
  })
  onUnmounted(() => {
    if (flushTipTimer) {
      clearInterval(flushTipTimer)
      // console.log('清除刷新的定时器flushTipTimer')
    }
    if (messageTimer) {
      clearInterval(messageTimer)
      // console.log('清除信息的定时器messageTimer')
    }
    if (quotationTimer) {
      clearInterval(quotationTimer)
      // console.log('清除行情定时器quotationTimer')
    }
  })
</script>

<template>
  <div class="page-container">
     <!--各内容集锦  -->
    <div class="left-pane">  
      <!--滚动现货价格(第一行) -->
      <div class="row1">
        <div>
          <div class="spot-box">
            <div class="title">
              <div class="title-box">
                <div>品种主力合约基差</div>
                <div class="date">{{ basicData.basicDate }}</div>
                <div class="document-icon" @click="basicData.showDialog = true"><el-icon><Document /></el-icon></div>
              </div>
            </div>
            <div class="scroll-wrap">
              <el-row justify="space-evenly" class="header">
                <el-col :span="4">名称</el-col>
                <el-col :span="5">收盘价</el-col>
                <el-col :span="5">现货价</el-col>
                <el-col :span="5">现货涨跌</el-col>
                <el-col :span="4">基差</el-col>
              </el-row>
              <div class="animate">
                <el-row v-for="(item, index) in basicData.data" :key="index"
                  justify="space-evenly"
                  class="row-item"
                >
                  <el-col :span="4">{{ item.name }}</el-col>
                  <el-col :span="5">{{ item.close }}</el-col>
                  <el-col :span="5">{{ item.spot}}</el-col>
                  <el-col :span="5">
                    <div v-if="item.spot_change > 0" :class="item.clsName">{{ item.strSpotChange }}<el-icon><Top /></el-icon></div>
                    <div v-else-if="item.spot_change === 0" :class="item.clsName">{{ item.strSpotChange }}<el-icon></el-icon> </div>
                    <div v-else :class="item.clsName">{{ item.strSpotChange }}<el-icon><Bottom /></el-icon></div>
                  </el-col>
                  <el-col :span="4">{{ item.basic }}</el-col>
                </el-row>
              </div>
          </div>
          </div>
          <div class="last-report">
            <div class="report_category">
              <div
                v-for="c in lastReportFile.fileCategory"
                :key="c.id"
                :class="c.active ? 'cate-item-active' : 'cate-item'"
                @click="toShowCategoryLastedReport(c)"
              >
                {{ c.name }}
              </div>
            </div>
            <div class="reports-box">
              <div 
                v-for="item in lastReportFile.data"
                :key="item.id"
                :title="item.title"
                class="file-item"
                @click="lastReportClick(item)"
              >
              <a>
                <div><el-icon size="30"><svg-icon :name="item.file_icon"></svg-icon></el-icon></div>
                <div class="file-name"><span>{{ item.title }}</span></div>
              </a>
              </div>
              <div class="file-item" @click="toMoreReportFile">
                <div><el-icon size="40"><svg-icon name="block-more"></svg-icon></el-icon></div>
                <div style="line-height: 34px;">更多研报</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 市场热度 -->
        <div class="market-hot-box">
          <div class="hot-title">
            <div class="title-name">
              <el-icon size="17">
                <svg-icon name="fire" :color="hotData.curColor"></svg-icon>
              </el-icon>
              <div :style="'color:' + hotData.curColor ">市场热度</div>
            </div>
            <div class="tabs">
              <span
                v-for="(tb, i) in hotData.tabs"
                :key="i"
                :class="hotData.curTab===i ? 'active': ''"
                @click="getTabMarkethot(i)"
              >
                {{ tb }}
              </span>
            </div>
          </div>
          <div class="hot-bar">
            <div 
              v-for="block in hotData.data" 
              :key="block.key" 
              :style="'width:' + block.percent + ';background-color:' + block.bg"
            >{{ block.count }}</div>
          </div>
          <div v-if="carouselData.isShow" class="carousel-box">
            <el-carousel height="185px">
              <el-carousel-item
                v-for="item in carouselData.data"
                :key="item"
                @click="toClickCaruselItem(item)"
              >
                <el-image :src="item.img_src" fit="fill" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div v-else class="indexes-box">
            <div 
              v-for="(idx, i) in indexesQuoteData.data"
              :key="i"
              :class="idx.class_name"
              @click="toChangeCandle(idx)"
            >
              <div class="mark">{{ idx.index_type }}</div>
              <div class="price">{{ idx.cur_price }}</div>
              <div>
                <span class="name">{{ idx.name }}</span>
                <span class="change-ratio">{{ idx.change_ratio }}</span>
              </div>
            </div>
          </div>
          <div class="indexChartBox">
            <div :class="curIndexChartData.class_name">
              <div class="tname">{{ curIndexChartData.title }}</div>
              <div class="titem">{{ curIndexChartData.price }}</div>
              <div class="titem">
                <el-icon v-if="curIndexChartData.change > 0"><CaretTop /></el-icon>
                <el-icon v-if="curIndexChartData.change < 0"><CaretBottom /></el-icon>
                {{ curIndexChartData.change }}
              </div>
              <div class="titem">
                <el-icon v-if="curIndexChartData.change > 0"><CaretTop /></el-icon>
                <el-icon v-if="curIndexChartData.change < 0"><CaretBottom /></el-icon>
                {{ curIndexChartData.changeRatio }}
              </div>
            </div>
            <div ref="indexChartTmp" class="chart-item"></div>
          </div>
        </div>
      </div>
      <!-- 短讯通(第二行) -->
      <div class="row2">
        <div class="fastmsg-box">
          <div class="title tip-title">
            <span>短讯通</span>
            <span class="flush">{{ flushTip.tips.join('') }}</span>
          </div>
          <div 
            v-for="smsg in shortmsgData.data" 
            :key="smsg.id" 
            class="msg-item"
            @click="toShowMsgDetail(smsg)"
          >
            <span class="time">
              <span class="icon"><el-icon><Clock /></el-icon></span>
              <span>{{ smsg.msg_time.slice(11, 16) }}</span>
            </span>
            <span class="text">{{ smsg.content }}</span>
          </div>
        </div>
      </div>
    </div>
    <!-- 持仓和财经日历消息 -->
    <div class="right-pane">
      <div class="positon-box">
        <div class="position-title">
          <div>品种净持仓<span class="pos-date">{{ netPositionData.positionDate }}</span></div>
          <div class="more-action" @click="netPositionData.showDialog = true">
            <div>更多</div>
            <el-icon><DArrowRight /></el-icon>
          </div>
        </div>
        <div class="pos-content">
          <div 
            v-for="(pst, i) in netPositionData.data"
            :key="i" 
            class="pos-item"
          >
            <div class="pname">{{ pst.name }}</div>
            <div v-if="pst.netPosition > 0" :class="pst.cls_name">{{ pst.strNetposition }}</div>
            <div v-else-if="pst.netPosition === 0" :class="pst.cls_name">{{ pst.strNetposition }}</div>
            <div v-else :class="pst.cls_name">{{ pst.strNetposition }}</div>
          </div>
        </div>
      </div>
      <div class="hot-datindex">
        <div class="hot-title">
          <div>数据指标榜</div>
          <div class="more-action" @click="toEnterDatalib">
            <div>数据库</div>
            <el-icon><DArrowRight /></el-icon>
          </div>
        </div>
        <div class="index-box">
          <el-row
            v-for="idx in hotDatalibIndex.data"
            :key="idx.id"
            class="index-row"
            :gutter="6"
          >
            <el-col :span=18>
              <el-tooltip
                placement="top-start"
                :disabled="!idx.tooltip"
                :content="`${idx.name}(${idx.unit})`"
              >
                <div>{{ idx.show_name }}</div>
              </el-tooltip>
            </el-col>
            <el-col :span=6 style="text-align: right">{{ idx.show_value }}</el-col>
          </el-row>
        </div>
      </div>
      <div class="calendar-box">
        <div class="calendar-title">
          <div>财经日历</div>
          <div class="date-text">
            {{ calendarFundConfig.queryDate }}【{{ calendarFundConfig.weekName }}】
          </div>
          <div class="more-action" @click="toMoreShortmsg">
            <div>更多</div>
            <el-icon><DArrowRight /></el-icon>
          </div>
        </div>
        <div
          v-if="calendarFundConfig.dataList.length > 0"
          class="calendar-content"
        >
          <el-scrollbar> 
            <div v-infinite-scroll="addLoadingCalendar" :infinite-scroll-immediate="false">
              <div
                v-for="cc in calendarFundConfig.dataList"
                :key="cc.id"
                class="cc-item"
              >
                <div class="country">
                  <div class="time">{{ cc.publish_time.substring(11, 16) }}</div>
                  <div
                    v-if="cc.country_info && cc.country_info.flag"
                    class="flag"
                  >
                    <el-avatar circle :src="cc.country_info.flag" />
                  </div>
                </div>
                <div class="values">
                  <div class="value-title">{{ cc.title }}</div>
                  <div class="old-value">
                    <el-row :gutter="16">
                      <el-col :span="12">
                        前&nbsp;&nbsp;&nbsp;值：{{ cc.pre_value }}
                      </el-col>
                      <el-col :span="12" class="real-value">
                        公布值：{{ cc.real_value }}
                      </el-col>
                      
                    </el-row>
                  </div>
                  <div>
                    <el-row :gutter="16">
                      <el-col :span="12">
                        预测值：{{ cc.fur_value || '-' }}
                      </el-col>
                      <el-col :span="12">
                        <el-rate
                          :model-value="parseInt(cc.importance)"
                          disabled
                          text-color="#ff9900"
                          :max="3"
                        />
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
              <div v-if="!calendarFundConfig.noMoreData && calendarFundConfig.dataLoading" class="load-text">
                <el-button link :loading="true">数据加载中...</el-button>
              </div>
              <div v-if="calendarFundConfig.noMoreData" class="no-more-text">
                  --- 没有更多数据了 ---
              </div>
          </div>
          </el-scrollbar>
        </div>
        <div v-else>
          <el-empty description="今日无财经日历"></el-empty>
        </div>
      </div>
    </div>
    <!-- 弹窗显示净持仓表 -->
    <el-dialog v-model="netPositionData.showDialog" title="品种前20名持仓">
      <el-table border stripe height="620" :data="netPositionData.allDataList">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="long" label="买单量" />
        <el-table-column prop="short" label="卖单量" />
        <el-table-column prop="net_position" label="净买单量" />
      </el-table>
    </el-dialog>
    <!-- 弹窗显示基差表 -->
    <el-dialog v-model="basicData.showDialog" title="品种主力合约基差">
      <el-table border stripe height="620" :data="basicData.data">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="close" label="收盘价" />
        <el-table-column prop="spot" label="现货价" />
        <el-table-column prop="spot_change" label="现货涨跌" />
        <el-table-column prop="basic" label="基差" />
      </el-table>
    </el-dialog>
     <!-- 弹窗显示短讯通 -->
     <el-dialog v-model="dialogMsgDetail.isShow" :title="dialogMsgDetail.time">
        <div class="msg-dialog">
          <div class="content">{{ dialogMsgDetail.content }}</div>
          <div class="actions">
            <div class="tips">【观点仅供参考，据此投资责任自担】</div>
            <el-button
              class="close"
              type="primary"
              @click="dialogMsgDetail.isShow = false"
            >
              确定
            </el-button>
          </div>
        </div>
     </el-dialog>
     <!-- 弹窗显示PDF -->
    <el-dialog 
      v-model="dialogReport.isShow"
      top="5vh"
      width="65%"
      :title="dialogReport.title"
    >
      <div class="report-dialog-container">
        <PDFView :pdfUrl=dialogReport.pdfUrl />
      </div>
    </el-dialog>
  </div>
</template>
<style scoped lang="scss">
  @keyframes contentLoop {
    0% {
      transform: translateY(0);
      -webkit-transform: translateY(0);
    }
    100% {
      transform: translateY(calc(-100% + 200px));
      -webkit-transform: translateY(calc(-100% + 200px));
    }
  }
  .report-dialog-container{
    height: 77vh;
    overflow-y: auto;
  }
  .msg-dialog {
    margin-top: -20px;
    .content {
      line-height: 28px;
    }
    .actions {
      text-align: center;
      margin-top: 32px;
      .close {
        height: 30px;
        width: 100px;
        font-size: 18px;
        margin-top: 8px;
      }
      .tips {
        font-size: 12px;
        color: #999;
      }
    }
  }
  .page-container {
    display: flex;
    margin: 10px 0;
    .title {
      color: #fff;
      background: linear-gradient(to right, #ed5729, #fff);
      padding: 2px 8px;
      font-style: italic;
    }
    .changeup {
      display: flex;
      align-items: center;
      color: $rcolor;
      justify-content: center;
    }
    .changedown {
      display: flex;
      align-items: center;
      justify-content: center;
      color: $gcolor;
    }
    .left-pane{
      margin-right: 10px;
      .row1 {
        display: flex;
        .spot-box {
          box-shadow: 0 0 10px #eee;
          width: 500px;
          height: 300px;
          background-color: #fff;
          .title-box {
            display: flex;
            align-items: center;
            .date {
              font-size: 11px;
              color: #666;
              margin-left: 10px;
            }
            .document-icon {
              margin-left: auto;
              cursor: pointer;
              color: #f8bdab;
              &:hover {
                color: #ed592c;
              }
            }
          }
          .scroll-wrap {
            overflow: hidden;
            width: 500px;
            height: 260px;
            .header {
              font-weight: 600;
              background-color: #fff;
              z-index:2;
              .el-col {
                text-align: center;
              }
            }
            .row-item {
              font-size: 14px;
              line-height: 26px;
              border-bottom: 1px solid #eee;
              padding: 4px 0;
              .el-col {
                text-align: center;
              }
            }
            .animate{
              animation: 100s contentLoop linear infinite normal;
              &:hover{
                animation-play-state: paused;
              }
            }
          }
        }
        .last-report {
          height: 220px;
          width: 500px;
          background-color: #fff; 
          margin-top: 10px;
          box-shadow: 0 0 10px #eee;
          .report_category {
            display: flex;
            align-items: center;
            font-size: 12px;
            border-bottom: 1px solid #fad2c5;
            .cate-item {
              padding: 4px 6px;
              cursor: pointer;
              &:hover {
                background-color: #efefef;
              }
              &-active {
                padding: 4px 6px;
                cursor: pointer;
                background-color: #fad2c5;
                &:hover {
                  background-color: #fad2c5;
                }
              }
            }
          }
          .reports-box {
            display: flex;
            flex-wrap: wrap;
          }

          .file-item {
            width: 97px;
            height: 67px;
            text-align: center;
            padding: 10px;
            margin: 4px;
            cursor: pointer;
            justify-content: center;
            border-radius: 10px;
            &:hover {
              background-color: rgba(230, 230, 230, 0.5);
            }
            a {
              text-decoration: none;
            }
            .file-name {
              font-size: 12px;
              display: -webkit-box;  // 作为弹性盒子
              -webkit-box-orient: vertical;  // 上到下排列子元素
              -webkit-line-clamp: 2; // 不是css规范，组合上2个属性生效，显示的行数
              overflow: hidden;
              color: #000;
              
            }
          }
        }
        .market-hot-box{
          box-shadow: 0 0 10px #eee;
          background-color: #fff;
          width: 480px;
          height: 530px;
          margin-left: 10px;
          .hot-title {
            font-weight: 600;
            // padding-left: 10px;
            padding: 10px;
            padding-bottom: 0;
            line-height: 26px;
            display: flex;
            align-items: center;
            .title-name {
              display: flex;
              align-items: center;
            }
            .tabs {
              margin-left: auto;
              font-weight: normal;
              font-size: 12px;
              line-height: 20px;
              cursor: pointer;
              margin-right: 10px;
              span {
                display: inline-block;
                padding: 0 4px;
                background-color: #eee;
                border-right:1px solid #fff;
              }
              span.active {
                background-color: #579ff8;
                color: #fff;
                transition: all 0.5s;
                border-radius: 2px;
              }
            }
          }
          .hot-bar {
            text-align: center;
            font-size: 13px;
            margin: 10px 10px 15px 10px;
            height: 18px;
            display: flex;
            align-items: center;
            color: #666;
            cursor: pointer;
          }
          .indexes-box {
            padding-top: 6px;
            border-top: 10px solid #f6f6f6;
            width: 480px;
            height: 165px;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: space-evenly;
            .mark {
              float: right;
              position: absolute;
              // background-color: #e48364;
              top: 10px;
              right: 3px;
              font-size: 8px;
              opacity: 0.7;
              -webkit-transform: scale(0.5);
              transform-origin: left bottom;
              // -webkit-transform-origin: left bottom;
              transform: translate(29.29%, -100%) rotate(45deg) scale(0.7);
            }
            .red {
              color: #d94532;
              background-color: rgba(202, 79, 60, 0.05);
            }
            .green {
              color: #5a923b;
              background-color: rgba(90, 146, 59, 0.05);
            }
            .idx-item {
              position: relative;
              cursor: pointer;
              padding: 10px;
              margin: 4px;
              width: 110px;
              height: 44px;
              border-radius: 10px;
              text-align: center;
              line-height: 22px;
              .price {
                font-weight: 500;
              }
              .name {
                font-size: 13px;
                color: #222 !important;
              }
              .change-ratio {
                font-size: 12px;
                margin-left: 2px;
              }
            }
          }
          .carousel-box {
            width: 460px;
            height: 185px;
            padding: 0 10px;
            ::v-deep(.el-image) {
              width: 460px;
              height: 185px;
              // border: 1px solid #1e539f;
            }
          }
          .indexChartBox {
            width: 460px;
            height: 240px;
            margin: 10px 10px;
            border: 1px solid #e9f2fe;
            .chart-title {
              font-size: 13px;
              font-weight: 600;
              line-height: 22px;
              padding: 0 10px;
              border-bottom: 1px dashed #e9f2fe;
              display: flex;
              align-items: center;
              margin: -16px 0 0 0px;
              .tname {
                color: #222;
                margin: 16px 0 0 16px;
                margin-right: 16px;
              }
              .titem {
                margin: 16px 0 0 16px;
                display: flex;
                align-items: center;
              }
            }
            .red {
              color: #d94532;
            }
            .green {
              color: #5a923b;
            }
            .chart-item {
              width:460px; 
              height:240px;
            }
          }
        }
        
      }
      .row2 {
        margin-top: 10px;
        .fastmsg-box {
          background-color: #fff;
          margin-top: 8px;
          width: 990px;
          box-shadow: 0 0 10px #eee;
          .tip-title {
            display: flex;
            align-items: center;
            .flush {
              font-size: 11px;
              margin-left: auto;
              color: #1e539f;
              font-style: normal;
              margin-right: 20px;
            }
          }
          
          .msg-item {
            padding: 6px 10px;
            line-height: 25px;
            height: 50px;
            border-bottom: 1px solid #e9f2fe;
            display: -webkit-box;  // 作为弹性盒子
            -webkit-box-orient: vertical;  // 上到下排列子元素
            -webkit-line-clamp: 2; // 不是css规范，组合上2个属性生效，显示的行数
            overflow: hidden;
            cursor: pointer;
            &:last-child{
              border-bottom: none;
            }
            &:hover {
              background-color: #f7f3f3;
              color: #1e539f;
            }
            .time {
              font-size: 14px;
              color: #1e539f;
              width: 80px;
              display: inline-block;
              .icon {
                vertical-align: middle;
                margin-right: 3px;
              }
            }
            .text {
              font-size: 14px;
            }
          }
        }
      }
    }
    .right-pane {
      .positon-box {
        height: 150px;
        padding: 10px;
        box-shadow: 0 0 10px #eee;
        background-color: #fff;
        .position-title {
          font-weight: 600;
          display: flex;
          align-items: center;
          padding-bottom: 4px;
          .more-action {
            display: flex;
            align-items: center;
            font-weight: normal;
            margin-left: auto;
            font-size: 13px;
            cursor: pointer;
            color: #999;
          }
        }
        .pos-date {
          color: #999;
          font-size: 12px;
          margin-left: 16px;
          font-style: italic;
          font-weight: normal;
        }
        .pos-content {
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          line-height: 24px;
          margin-top: 4px;
          // border: 1px solid #ebf2fd;

          .pos-item {
            width: 182px;
            display: flex;
            font-size: 14px;
            align-items: center;
            justify-content: space-between;
            color: #2360b2;
            border-bottom: 1px solid #eee;
            &:nth-child(even) {
              padding-left: 6px;
              
            }
            &:nth-child(odd) {
              border-right: 1px solid #eee;
              padding-right: 5px;
            }
            &:nth-last-child(2),&:nth-last-child(1){
              border-bottom: none;
            }
          }
        }
      }
      .hot-datindex {
        position: relative;
        height: 250px;
        width: 400px;
        // border: 1px solid #222;
        background-color: #fff;
        margin: 10px 0;
        .hot-title {
          font-weight: 600;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eee;
          padding: 8px 10px;
        }
        .more-action {
          display: flex;
          align-items: center;
          font-weight: normal;
          margin-left: auto;
          font-size: 13px;
          cursor: pointer;
          color: #999;
        }
        .index-box {
          font-size: 15px;
        }
        .index-row {
          padding: 3px 10px;
          &:hover {
            background-color: #eee;
            cursor: default;
          }
          .el-col {
            width: 100%;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
      .calendar-box {
        height: 880px;
        margin-top: 10px;
        background-color: #fff;
        box-shadow: 0 0 10px #eee;
        .calendar-title {
          font-weight: 600;
          display: flex;
          align-items: center;
          border-bottom: 1px solid #eee;
          padding: 8px 10px;
          .flush {
            font-weight: normal;
            font-size: 12px;
            // margin-left: 16px;
            color: #ed5729;
          }
          .date-text {
            margin-left: auto;
            font-size: 14px;
            color: #555;
            font-style: italic;
          }
          .more-action {
            // display: flex;
            display: none;
            align-items: center;
            font-weight: normal;
            margin-left: auto;
            font-size: 13px;
            cursor: pointer;
            color: #999;
          }
        }
        // .calendar-content::-webkit-scrollbar {
        //     width: 0;
        //   }
        //   .calendar-content:hover::-webkit-scrollbar {
        //       width: 6px;
              
        //   }
        .calendar-content {
          width: 400px;
          height: 841px;
          overflow: auto;
          // background-color: #1e539f;
          .load-text {
            text-align: center;
            line-height: 25px;
          }
          .no-more-text {
            text-align: center;
            font-size: 12px;
            color: #666;
            line-height: 25px;
          }
          
          .cc-item {
            display: flex;
            padding: 8px 10px;
            align-items: center;
            border-bottom: 1px solid #eee;
            &:last-child {
              border-bottom: 0;
            }
            .country {
              .flag {
                margin-top: 3px;
              }
            }
            .values {
              font-size: 15px;
              margin-left: 20px;
              width: 100%;
              .value-title {
                font-size: 15px;
                line-height: 24px;
              }
              .old-value {
                color: #2360b2;
              }
              .real-value {
                color: #d94532;
                font-weight: 600;
              }
            }
          }
        }
      }
    }
  }
</style>
